window.addEventListener('load',function()
{
    //1.获取元素
    var left=document.querySelector('.left');
    var right=document.querySelector('.right');
    var img = document.querySelector('.img');
    var imgWidth =img.offsetWidth;
    img.addEventListener('mouseenter',function()
    {
        left.style.display ='block';
        right.style.display ='block';
        clearInterval(timer);
        timer=null;     //清除定时器变量
    })
    img.addEventListener('mouseleave',function()
    {
        left.style.display ='none';
        right.style.display ='none';
        timer=this.setInterval(function(){
            //手动调用点击事件
            right.click();
        },20000)
    })

    var ul = img.querySelector('ul');

    //克隆第一张图片(li)放到ul最后面
    var first =ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //点击右侧按钮，图片滚动一张
    var num= 0;
    right.addEventListener('click',function()
    {
        if(num == ul.children.length-1)
        {
            ul.style.left=0;
            num=0;
        }
        num++;
        animate(ul,-num * imgWidth);
    })



    //点击右侧按钮，图片滚动一张
    left.addEventListener('click',function()
    {
        if(num == 0)
        {
            num=ul.children.length-1;
            ul.style.left=-num * imgWidth + 'px';
        }
        num--;
        animate(ul,-num * imgWidth);
    })



    //自动播放轮播图
    var timer=this.setInterval(function(){
        //手动调用点击事件
        right.click();
    },2000)
})